<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/4/24
  Time: 9:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
    <div id="main">
        <div class="demo">
            <form id="form" action="get">

                <select name="year" id="year" class="select">
                    <c:forEach var="var" items="${years}">

                        <c:choose>
                            <c:when test="${var == year}"><option value="${var}" selected="selected">${var}</option></c:when>
                            <c:otherwise><option value="${var}">${var}</option></c:otherwise>
                        </c:choose>
                    </c:forEach>
                </select>

                <select name="month" class="month" >
                    <c:forEach var="var" items="${months}">
                        <option value="${var}">${var}</option>
                    </c:forEach>
                </select>
                <input type="submit" value="submit">
            </form>
        </div>
    </div>
    <div id="test" style="height:600px;"></div>

    <script type="text/javascript" src="res/jquery.js"></script>
    <script type="text/javascript" src="res/echarts.js"></script>
    <script>
        var xAxisDataJson = [];
        var seriesDataJson = [];
        var G = {
            xAxis:'${xAxisData}',
            series:'${seriesData}',
            menus:'${menus}'
        };
        var zNodes = eval("("+G.menus+")");
        var seriesData = eval("("+G.series+")");
        console.log(zNodes)
        var xArray = eval(${menus});
        console.log(zNodes.length);
        for(var k=0;k<zNodes.length;k++){
            console.log(zNodes[k]);
        }
        console.log(xArray);
        console.log(G.xAxis);
        for(var i=0;i<zNodes.length;i++){
            xAxisDataJson[i] = zNodes[i];
            seriesDataJson[i] = seriesData[i];
        }

        var barData = {
            xAxisData:function(){
                return xAxisDataJson;
            },
            seriesData:function(){
                return seriesDataJson;
            }
        };

        var myChart = echarts.init(document.getElementById('test'));
        option = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : barData.xAxisData(),
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:barData.seriesData()
                }
            ]
        };

        myChart.setOption(option);
    </script>
</body>
</html>
